<template>
  <div style="color:#333">
    <div style="padding:0 0.2667rem;background:#fff;">
      <div class="flex region" style="padding:0.4rem 0rem">
        <div class="name">
          意向区域：
          <div style="font-size:0.22rem;color:#999">(可添加多个)</div>
        </div>

        <div>
          <div class="vertical" v-for="(item,index) in region" :key="item.name">
            <div @click="setAreaCity()" v-if="index<1">
              <span style="color:red">*</span>
              {{item.city}}
              <span class="san"></span>
            </div>
            <div v-else></div>
            <div @click="setArea(index)">
              {{item.district}}
              <span class="san"></span>
            </div>
            <div>
              <input type="text" placeholder="所在村/社区名称" :value="item.village" @input="villageipt" />
            </div>
            <img
              src="../assets/del.png"
              alt
              style="width:0.3733rem;height:0.3733rem"
              v-if="index != 0 "
              @click="delRegion(index)"
            />
          </div>
        </div>
      </div>
      <div class="vertical add" @click="addRegion">
        <img
          src="../assets/add.png"
          alt
          style="width:0.3733rem;height:0.3733rem;margin-right:0.2667rem"
        />
        <span>添加区域</span>
      </div>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">
        房屋类型：
        <div>(可多选)</div>
      </div>
      <van-checkbox-group v-model="houseTypes">
        <div class="checkbox_box">
          <van-checkbox
            v-for="(item) in houseTypesList"
            :key="item"
            :name="item"
            icon-size="12"
            checked-color="#F6CD48"
            @click="toggle(item)"
          >{{ item }}</van-checkbox>
        </div>
      </van-checkbox-group>
    </div>

    <div style="margin-top:0.2667rem">
      <div class="flex1" style="border-color:rgb(249, 249, 249);border:0">
        <div class="name">
          地铁线路：
          <div>(可添加多个)</div>
        </div>
        <div class="subwayBox" style="display:flex;flex-wap;width:8rem">
          <div
            class="subway"
            v-for="(item,index) in subwayLines"
            :key="index"
            @click="subwayPrick(index)"
          >
            {{item}}
            <span class="san"></span>
            <img src="../assets/del.png" @click.stop="delSubwayLines(index)" v-if="index !=0 " />
          </div>
        </div>
      </div>
      <div class="vertical add" @click="addSubwayLines">
        <img
          src="../assets/add.png"
          alt
          style="width:0.3733rem;height:0.3733rem;margin-right:0.2667rem"
        />
        <span>添加地铁线路</span>
      </div>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">月租范围：</div>
      <van-radio-group v-model="monthlyRentRange" style="width:10rem">
        <div class="radio_box_m">
          <van-radio
            v-for="(item) in monthlyRentList"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
          <div>
            <van-radio name="自定义" icon-size="12" checked-color="#F6CD48">
              自定义：
              <input
                type="text"
                class="radioipt"
                :value="monthly1"
                @input="on_monthly1($event)"
              /> -
              <input type="text" class="radioipt" :value="monthly2" @input="on_monthly2($event)" /> 元
            </van-radio>
          </div>
        </div>
      </van-radio-group>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">楼层范围：</div>
      <van-radio-group v-model="floorRange">
        <div class="radio_box">
          <van-radio
            v-for="(item) in floorRangeList"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">是否电梯楼：</div>
      <van-radio-group v-model="isElevatorBuilding">
        <div class="radio_box">
          <van-radio
            v-for="(item) in isElevatorBuildingList"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">是否要一楼：</div>
      <van-radio-group v-model="isFirstFloor">
        <div class="radio_box">
          <van-radio
            v-for="(item) in isFirstFloorList"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">是否要顶楼：</div>
      <van-radio-group v-model="isAttic">
        <div class="radio_box">
          <van-radio
            v-for="(item) in isAtticList"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">工作地点：</div>
      <div style="color:#999;margin-bottom:0.2667rem">选择工作地点定位可为你匹配适合的居住区域</div>
    </div>
    <div id="container"></div>

    <button class="but" @click="sub">{{isNew ? "提交" : "保存"}}</button>

    <div style="height:0.6667rem;"></div>

    <van-popup v-model="isArea" position="bottom">
      <van-area :area-list="areaList" :columns-num="num" @confirm="confirm" @cancel="cancel" />
    </van-popup>
    <van-popup v-model="showPrick" position="bottom">
      <van-picker
        :columns="columns"
        @confirm="prickConfirm"
        @cancel="showPrick = false"
        show-toolbar
        :default-index="default_index"
      />
    </van-popup>
  </div>
</template>


<script>
// import { TMap } from "@/js/map";
import areaFormat from "./comm/area";
import { ajax, login } from "../js/api";
import { Dialog, Toast } from "vant";
export default {
  name: "HelloWorld",
  data() {
    return {
      region: [{ omit: "", city: "城市", district: "区县", village: "" }],
      regionIndex: 0,
      houseTypesList: [
        "不限",
        "单间",
        "一房一厅",
        "两房一厅",
        "三房一厅",
        "三房两厅",
        "四房一厅",
        "四房两厅",
        "其他"
      ],
      houseTypes: ["不限"],
      monthlyRentList: [
        { value: "不限", name: "" },
        { value: "500元以内", name: 500 },
        { value: "500-700元", name: "500-700" },
        { value: "700-1000元", name: "700-1000" },
        { value: "1000-1500元", name: "1000-1500" },
        { value: "1500-2000元", name: "1500-2000" },
        { value: "2000-3000元", name: "2000-3000" },
        { value: "3000元以上", name: "3000" }
      ], //月租范围
      monthly1: "",
      monthly2: "",
      monthlyRentRange: "", //月租范围
      floorRangeList: [
        { value: "不限", name: "" },
        { value: "3楼以下", name: "1-3" },
        { value: "4-6楼", name: "4-6" },
        { value: "7楼以上", name: "7" }
      ],
      floorRange: "", //楼层范围
      isElevatorBuildingList: [
        { value: "不限", name: "" },
        { value: "是", name: true },
        { value: "否", name: false }
      ],
      isElevatorBuilding: "", //电梯楼要求
      isFirstFloorList: [
        { value: "不限", name: "" },
        { value: "是", name: true },
        { value: "否", name: false }
      ],
      isFirstFloor: "", //一楼要求
      isAtticList: [
        { value: "不限", name: "" },
        { value: "是", name: true },
        { value: "否", name: false }
      ],
      isAttic: "", //楼顶要求
      subwayLines: ["不限"], //地铁线路
      wayIndex: 0,
      columns: ["不限"],
      columnsActive: "不限",
      workingPlaceLng: "",
      workingPlaceLat: "",

      isArea: false,
      num: 3,
      ACity: false,
      showPrick: false,
      prickType: "",
      areaList: areaFormat,
      citylocation: null,
      default_index: 0,
      isNew: true,
      id: ""
    };
  },
  components: {},
  mounted() {
    this.isNew = this.$route.query.isNew;
    console.log(this.isNew);

    this.map(39.91485, 116.403765);
    this.getold();
  },
  methods: {
    addRegion() {
      this.region.push({
        omit: "",
        city: "城市",
        district: "区/县",
        village: ""
      });
    },
    delRegion(index) {
      this.region.splice(index, 1);
    },
    villageipt(e) {
      if (this.region[this.regionIndex].district == "全部") {
        Dialog.alert({
          message: `请选择${this.region[0].city}区县`
        });
        return (e.target.value = "");
      } else {
        this.region[this.regionIndex].village = e.target.value;
      }
      // console.log(e.target.value);
    },
    setAreaCity() {
      this.isArea = true;
      this.num = 2;
      this.ACity = true;
    },
    setArea(index) {
      this.isArea = true;
      this.num = 3;
      this.regionIndex = index;
    },
    on_monthly1(e) {
      this.monthly1 = e.target.value;
    },
    on_monthly2(e) {
      this.monthly2 = e.target.value;
    },
    toggle(e) {
      console.log(e, this.houseTypes);
      if (e == "不限") {
        this.houseTypes = [e];
      } else {
        for (let i in this.houseTypes) {
          if (this.houseTypes[i] == "不限") {
            this.houseTypes.splice(i, 1);
            break;
          }
        }
      }
    },
    confirm(e) {
      // console.log(this.region, this.regionIndex);
      if (this.ACity) {
        this.region = [
          { omit: e[0].name, city: e[1].name, district: "全部", village: "" }
        ];
        this.isArea = false;
        this.regionIndex = 0;
        this.getSubwayLines(e[1].name);
        let address = `${e[0].name},${e[1].name}`;
        this.setMap(address);
        this.ACity = false;
        this.subwayLines = ["不限"];
      } else {
        if (this.region[0].city != "城市") {
          if (this.region[0].city != e[1].name && this.regionIndex != 0) {
            Dialog.alert({
              message: `请选择${this.region[0].city}区县`
            });
            return;
          }
        }
        this.region[this.regionIndex].omit = e[0].name;
        this.region[this.regionIndex].city = e[1].name;
        this.region[this.regionIndex].district = e[2].name;
        this.isArea = false;
      }
    },
    cancel() {
      this.isArea = false;
      this.ACity = false;
    },
    getSubwayLines(city) {
      this.columns.length = 1;
      let data = {
        city: city
      };
      ajax("area/listSubwayLine", data, "POST", res => {
        if (res.data.code == 200) {
          for (let i of res.data.data) {
            this.columns.push(i.line);
          }
        }
      });
    },
    addSubwayLines() {
      this.subwayLines.push("不限");
    },
    delSubwayLines(index) {
      this.subwayLines.splice(index, 1);
    },
    subwayPrick(index) {
      this.default_index =
        this.columns.indexOf(this.subwayLines[index]) != -1
          ? this.columns.indexOf(this.subwayLines[index])
          : 0;
      this.showPrick = true;
      this.wayIndex = index;
    },
    prickConfirm(e) {
      if (e == "不限") {
        this.subwayLines[this.wayIndex] = e;
      } else {
        this.subwayLines[this.wayIndex] = e;
      }
      this.showPrick = false;
    },

    map(workingPlaceLat, workingPlaceLng) {
      var center = new qq.maps.LatLng(workingPlaceLat, workingPlaceLng),
        marker,
        markerArr = [],
        that = this;

      var map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
        center: center,
        zoom: 12
      });
      //添加监听事件
      qq.maps.event.addListener(map, "click", function(event) {
        // console.log(markerArr);
        for (let i in markerArr) {
          markerArr[i].setMap(null);
        }
        markerArr.length = 0;
        map.setCenter(event.latLng);
        that.workingPlaceLng = event.latLng.lng;
        that.workingPlaceLat = event.latLng.lat;
        // console.log(that.workingPlaceLng);
        marker = new qq.maps.Marker({
          map: map,
          position: event.latLng
        });
        markerArr.push(marker);
      });
      marker = new qq.maps.Marker({
        position: center,
        draggable: false,
        map: map
      });
      markerArr.push(marker);
      this.citylocation = new qq.maps.Geocoder({
        complete: function(result) {
          console.log(result);
          map.setCenter(result.detail.location);
          // marker = new qq.maps.Marker({
          //   map: map,
          //   position: result.detail.location
          // });
        }
      });
    },
    setMap(localcity) {
      this.citylocation.getLocation(localcity);
    },
    sub() {
      let monthlyRentRange = this.monthlyRentRange;
      let houseTypes = this.houseTypes.map(val => {
        if (val == "不限") {
          return "";
        } else {
          return val;
        }
      });
      let subwayLines = this.subwayLines.map(val => {
        if (val == "不限") {
          return "";
        } else {
          return val;
        }
      });
      if (this.region[0].omit == "") {
        Dialog.alert({
          message: `请选择意向区域`
        });
        return;
      }
      for (let i in this.region) {
        if (this.region[i].district == "区/县" || this.region[i].city == "城市") {
          Dialog.alert({
            message: `请选正确的择意向区域`
          });
          return;
        }
      }
      let region = this.region.map(val => {
        if (val.district == "全部" || val.district == "区/县") {
          return `${val.omit}-${val.city}`;
        }
        if (val.village == "") {
          return `${val.omit}-${val.city}-${val.district}`;
        }
        return `${val.omit}-${val.city}-${val.district}-${val.village}`;
      });
      if (monthlyRentRange == "自定义") {
        if (Number(this.monthly1) > Number(this.monthly2)) {
          Dialog.alert({
            message: "请填写正确的月租范围"
          });
          return;
        }
        monthlyRentRange = this.monthly1 + "-" + this.monthly2;
      }
      let data = {
          userId: this.$store.state.userId,
          areas: region.join(","),
          houseTypes: houseTypes.join(","),
          subwayLines: subwayLines.join(","),
          // furniture:'',
          isAttic: this.isAttic,
          floorRange: this.floorRange,
          isFirstFloor: this.isFirstFloor,
          isElevatorBuilding: this.isElevatorBuilding,
          monthlyRentRange: monthlyRentRange,
          workingPlaceLng: this.workingPlaceLng,
          workingPlaceLat: this.workingPlaceLat
        },
        that = this;
      // console.log(data);
      if (this.isNew) {
        ajax("pushSettingOfHouse", data, "POST", res => {
          console.log(res);
          if (res.data.code == 200) {
            Toast.success("提交成功！");
            setTimeout(() => {
              that.$router.go(-1);
            }, 3000);
          } else {
            Dialog.alert({
              message: res.data.msg
            });
          }
        });
      } else {
        ajax("pushSettingOfHouse/" + this.id, data, "put", res => {
          console.log(res);
          if (res.data.code == 200) {
            Toast.success("更新成功！");
            setTimeout(() => {
              that.$router.go(-1);
            }, 3000);
          } else {
            Dialog.alert({
              message: res.data.msg
            });
          }
        });
      }
    },
    getold() {
      let that = this;
      ajax("pushSettingOfHouse/last/one", "", "get", res => {
        if (res.data.code == 200) {
          try {
            that.region = res.data.data.areas.split(",").map(val => {
              return {
                omit: val.split("-")[0],
                city: val.split("-")[1],
                district: !val.split("-")[2]? "全部" : val.split("-")[2],
                village: !val.split("-")[3]?'':val.split("-")[3]
              };
            });
          } catch (e) {
            that.region = [
              {
                omit: val.split("-")[0],
                city: val.split("-")[1],
                district: !val.split("-")[2]? "全部" : val.split("-")[2],
                village: !val.split("-")[3]?'':val.split("-")[3]
              }
            ];
          }
          try {
            if (res.data.data.houseTypes != "") {
              that.houseTypes = res.data.data.houseTypes.split(",");
            } else {
              that.houseTypes = ["不限"];
            }
          } catch (e) {
            if (res.data.data.houseTypes != "") {
              that.houseTypes = [res.data.data.houseTypes];
            } else {
              that.houseTypes = ["不限"];
            }
          }
          try {
            that.subwayLines = res.data.data.subwayLines.split(",");
            that.subwayLines = that.subwayLines.map(val => {
              if (val == "") {
                return "不限";
              } else {
                return val;
              }
            });
          } catch (e) {
            that.subwayLines = [
              res.data.data.subwayLines != ""
                ? res.data.data.subwayLines
                : "不限"
            ];
          }
          let monthlyRentList = [];
          for (let i of that.monthlyRentList) {
            monthlyRentList.push(i.name);
          }
          if (monthlyRentList.indexOf(res.data.data.monthlyRentRange) == -1) {
            that.monthlyRentRange = "自定义";
            that.monthly1 = res.data.data.monthlyRentRange.split("-")[0];
            that.monthly2 = res.data.data.monthlyRentRange.split("-")[1];
          } else {
            that.monthlyRentRange = res.data.data.monthlyRentRange;
          }
          that.id = res.data.data.id;
          that.isElevatorBuilding = res.data.data.isElevatorBuilding
            ? res.data.data.isElevatorBuilding
            : "";
          that.floorRange = res.data.data.floorRange
            ? res.data.data.floorRange
            : "";
          that.isAttic = res.data.data.isAttic ? res.data.data.isAttic : "";
          that.isFirstFloor = res.data.data.isFirstFloor
            ? res.data.data.isFirstFloor
            : "";
          that.workingPlaceLat = res.data.data.workingPlaceLat;
          that.workingPlaceLng = res.data.data.workingPlaceLng;
        }
        this.map(res.data.data.workingPlaceLat, res.data.data.workingPlaceLng);
        this.getSubwayLines(that.region[0].city);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* pages/my/issueDemand/issueDemand.wxss */

.top {
  font-size: 0.28rem;
  color: #999;
  padding: 0.4rem 0.2667rem;
}
.flex {
  display: flex;
  /* align-items: center; */
  padding: 0.4rem 0.2667rem;
  background: #fff;
  font-size: 0.28rem;
  border-bottom: 1px solid #f2f2f2;
}

.flex1 {
  display: flex;
  padding: 0.4rem 0.2667rem 0;

  background: #fff;
  font-size: 0.28rem;
  border-bottom: 1px solid #f2f2f2;
}

.name {
  width: 3rem;
  /* padding-right: 0.6667rem; */
}

.flex input {
  width: 6rem;
}

checkbox-group,
radio-group {
  width: 6.6667rem;
}

.checkbox_type {
  display: inline-block;
  width: 2.2rem;
}

.radio_price {
  display: inline-block;
  width: 3.3333rem;
  margin-bottom: 0.8667rem;
}

.radio_price_cus {
  display: flex;
  align-items: center;
  width: 8rem;
}

.radio_price_cus input {
  width: 1.3333rem;
  border: 1px solid #f2f2f2;
  border-radius: 0.2rem;
  text-align: center;
}

textarea {
  width: 6rem;
  height: 0.92rem;
  overflow: hidden;
}

.but {
  display: block;
  width: 9.4667rem;
  height: 1.1733rem;
  line-height: 1.1733rem;
  margin: 0.5333rem auto;
  background: rgba(246, 205, 72, 1);
  font-size: 0.3733rem;
  color: #333;
  border-radius: 0.5867rem;
}
.map {
  position: relative;
  width: 7.6rem;
  height: 4.4rem;
}
.hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5867rem;
  line-height: 0.5867rem;
  font-size: 0.2667rem;
  color: rgba(250, 45, 45, 1);
  background: rgba(246, 205, 72, 1);
  text-align: center;
  z-index: 999;
}
.region {
  border: 0;
}
.region > div > div > div {
  width: 2rem;
  margin-right: 0.2667rem;
  margin-top: 0.0667rem;
}
.region input {
  width: 100%;
}
.add {
  position: relative;
  justify-content: center;
  background: #fff;
  padding: 0.4rem;
  border-top: 1px solid #f2f2f2;
}
.add::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0rem;
  width: 2rem;
  height: 0.0267rem;
  background: #fff;
}
.checkbox_box {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  width: 7rem;
}
.van-checkbox {
  width: 2.3rem;
  margin-bottom: 0.2667rem;
}
.radio_box,
.radio_box_m {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  width: 7rem;
}
.radio_box_m > .van-radio {
  width: 3rem;
  margin-bottom: 0.2667rem;
}
.radio_box_m > div > .van-radio {
  margin-bottom: 0.2667rem;
}
.radio_box > .van-radio {
  width: 2rem;
  margin-bottom: 0.2667rem;
}
.radioipt {
  display: inline-block;
  width: 1.0667rem;
  height: 0.5333rem;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 0.1067rem;
  text-align: center;
}
.subwayBox {
  display: flex;
  flex-wrap: wrap;
}
.subway {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  width: 3rem;
  margin-bottom: 0.2667rem;
}
.subway > img {
  width: 0.3733rem;
  height: 0.3733rem;
  margin-left: 0.2667rem;
}
#container {
  min-width: 10rem;
  min-height: 6.6667rem;
}
</style>
